<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
            <el-breadcrumb-item>面经后台</el-breadcrumb-item>
            <el-breadcrumb-item>数据看板</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="echartsHm">
            <el-row>
                <el-col :span="6" class="leftEcharts">
                    <el-card class="box-card" style="min-width: 300px; margin-right: 10px;">
                        <div class="title">
                            <h5>
                                活跃用户
                            </h5>
                            <i class="el-icon-user"></i>
                        </div>
                        <h2 class="num">802</h2>
                        <p class="tag"><i>↑ 5.23%</i>&nbsp;&nbsp; 最近一个月</p>
                    </el-card>
                    <el-card class="box-card" style="min-width: 300px;margin-right: 10px; ">
                        <div class="title">
                            <h5>
                                平均访问量
                            </h5>
                            <i class="el-icon-tickets"></i>
                        </div>
                        <h2 class="num">1298</h2>
                        <p class="tag"><i>↓ 8.56% </i>&nbsp;&nbsp; 截止最近一周</p>

                    </el-card>
                    <el-card class="box-card" style="min-width: 300px; margin-right: 10px;">
                        <div class="imgsss">
                            <h4>Enhance your Campaign for better outreach →</h4>
                            <img src="@/assets/img.svg">
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="17">
                    <el-card class="box-card" style="height: 465px;">
                        <div class="peopleCounting" style="height: 445px;" ref="peopleCounting">

                        </div>
                    </el-card>

                </el-col>
            </el-row>
            <el-row class="buttom">
                <el-col :span="23">
                    <el-col :span="8">
                        <el-card class="box-card" style="min-width: 300px; height: 465px; margin-right: 10px;">
                            <h5 class="cardh5">性别分布</h5>
                            <div class="peoplesex" style="min-width: 400px; height: 455px;" ref="peoplesex">
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="box-card" style="min-width: 400px;height: 465px; margin:0 10px">
                            <h5 class="cardh5" style="margin-bottom: 20px;">浏览器访问量</h5>
                            <div class="browserRadar" style="height: 405px; " ref="browserRadar">
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="box-card" style="height: 465px;margin-left: 10px;">
                            <h5 class="cardh5" style="margin-bottom: 20px;">设备系统访问情况</h5>
                            <img width="450px" height="400px" src="@/assets/chart-02.svg" alt="" />
                        </el-card>
                    </el-col>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    mounted() {
        const peopleCounting = echarts.init(this.$refs.peopleCounting)
        const peoplesex = echarts.init(this.$refs.peoplesex)
        const browserRadar = echarts.init(this.$refs.browserRadar)
        const Countingoption = {
            title: {
                text: '全年访问人数统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        const sexoption = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '性别比例',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '男' },
                        { value: 735, name: '女' },
                    ]
                }
            ]
        };
        const Radaroption = {

            legend: {
                data: ['Allocated Budget']
            },
            radar: {
                // shape: 'circle',
                indicator: [
                    { name: 'Chrome', max: 6500 },
                    { name: 'Firefox', max: 16000 },
                    { name: 'Safan', max: 30000 },
                    { name: 'Opera', max: 38000 },
                    { name: 'Edge', max: 52000 },
                    { name: 'Olorer', max: 25000 }
                ]
            },
            series: [
                {
                    name: 'Budget',
                    type: 'radar',
                    data: [
                        {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            // name: 'Allocated Budget'
                        },
                    ]
                }
            ]
        };
        peopleCounting.setOption(Countingoption)
        peoplesex.setOption(sexoption)
        browserRadar.setOption(Radaroption)
    },
}
</script>

<style lang="scss" scoped>
.echartsHm {
    min-width: 1200px;
    width: calc(100vw - 200px - 50px);
    padding: 20px 0;

    .leftEcharts {
        .box-card {
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .num {
                color: gray;
                font-size: 30px;
                padding: 10px 0px;
            }

            .tag {
                color: gray;

                i {
                    color: #0ACF97;
                }
            }

            margin-bottom: 20px;

            &:nth-child(2) {
                .tag {
                    i {
                        color: red;
                    }
                }

            }

            &:nth-child(3) {
                margin-bottom: 0;

                .imgsss {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    h4 {
                        width: 100px;
                    }

                    img {
                        width: 100px;
                        height: 100px;
                    }
                }

            }
        }

    }
    .buttom{
            margin-top: 20px;
            .cardh5{
                font-size: 16px;
            }
        }

}
</style>